<script lang="ts">
  import { onMount } from "svelte";
  import Badge from "../../../components/Badge/Badge.svelte";
  import { collegeCollection } from "../stores";

  function goto(type: string) {
    window.location.href = `/college?type=${type}`;
  }

  onMount(() => {
    collegeCollection.get();
  });
</script>

<div class="h-full flex flex-1 items-center px-6 overflow-hidden">
  {#each $collegeCollection.colleges as badge, i}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div class="w-1/4 cursor-pointer" on:click={() => goto(badge.value)}>
      <Badge
        label={badge.name}
        active={$collegeCollection.index === i}
        type={badge.type}
      />
    </div>
  {/each}
</div>
